<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../dist/josh-ui.min.css">
    <link rel="stylesheet" href="./css/mine.css">
    <title>Josh优品-个人中心</title>
</head>
<body class="page-mine">
    <div class="ju-navbar">
        <a class="navbar-item" href="./index.html">
            <i class="fa fa-home icon"></i>
            <span class="name">首页</span>
        </a>
        <a class="navbar-item" href="./list.html">
            <i class="fa fa-search icon"></i>
            <span class="name">发现</span>
        </a>
        <a class="navbar-item active">
            <i class="fa fa-user-o icon"></i>
            <span class="name">我的</span>
        </a>
    </div>
    <div class="ju-content">
        <!-- 内容区 -->
        <div class="ju-panel-body user">
            <img class="portrait" src="./img/list-img.jpg" alt="用户头像"></img>
            <div class="info">
                <h2 class="nick-name">Josh</h2>
                <p class="detail">
                    <a class="detail-item" href="#">关注：6890</a>
                    <a class="detail-item" href="#">收藏：6890</a>
                </p>
            </div>
        </div>
        <!-- 菜单区域 -->
        <div class="ju-panel-body no-padding">
            <div class="ju-menu">
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">我的钱包</p>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">我的文章</p>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">访问统计</p>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">我的推广码</p>
                    <i class="fa fa-qrcode ju-menu-value"></i>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">接收新消息</p>
                    <input class="ju-switch" type="checkbox" checked></input>
                </a>
            </div>
        </div>
        <div class="ju-panel-body no-padding">
            <div class="ju-menu">
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">设置</p>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
                <a class="ju-menu-item" href="#">
                    <p class="ju-menu-name">意见反馈</p>
                    <i class="fa fa-chevron-right ju-menu-icon"></i>
                </a>
            </div>
        </div>
        <div class="ju-panel-body no-padding">
            <span class="ju-btn ju-btn-large logout-btn">退出登录</span>
        </div>
    </div>

    <!-- 蒙版 -->
    <!-- 显示的我推广 -->
    <div class="ju-modal">
    <!-- 需要打开二维码时，添加show这个class -->
    <!-- <div class="ju-modal show"> -->
        <div class="ju-mask"></div>
        <div class="ju-modal-wrap">
            <div class="ju-modal-body no-padding">
                <img class="ju-modal-img" src="./img/qrcode.jpg" alt="你码没了"></img>
            </div>
            <i class="fa fa-close ju-modal-close"></i> 
        </div>
    </div>

    <!-- 确认关闭新消息提醒 -->
    <div class="ju-action-sheet">
    <!-- 需要打开弹窗时，添加show这个类 -->
    <!-- <div class="ju-action-sheet show"> -->
        <div class="ju-mask"></div>
        <div class="ju-action-sheet-wrap">
            <div class="ju-action-sheet-header">
                <h1 class="ju-action-sheet-title">关闭该功能后，您将不再收到新消息的通知，确定要这样做吗？</h1>
            </div>   
            <div class="ju-action-sheet-body">
                <a class="ju-action-sheet-menu">关闭新消息提醒</a>
            </div>
            <div class="ju-action-sheet-footer">
                <a class="ju-action-sheet-menu">取消</a>
            </div> 
        </div>
    </div>
</body>
</html>